<template>
  <view class="invoice-container">
    <div class="form-box">
      <u-form :model="form" :rules="rules" ref="uForm" label-width="240rpx">
        <u-form-item label="开票公司" prop="company_name"><u-input v-model="form.company_name" /></u-form-item>
        <u-form-item label="统一社会信用代码" prop="intro"><u-input v-model="form.intro" /></u-form-item>
        <u-form-item label="未开发票金额" prop="total_amount"><u-input v-model="form.total_amount" disabled /></u-form-item>
        <u-form-item label="确认开票金额" prop="amount"><u-input v-model="form.amount" type="digit" /></u-form-item>
        <u-form-item label="接收邮箱" prop="email"><u-input v-model="form.email" type="email" /></u-form-item>
      </u-form>
    </div>
    <button class="add-btn" style="margin: 20rpx 0" @click="submit">提交</button>

  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      form: {
        //开票公司
        company_name: '',
        //统一社会信用代码
        intro: '',
        // 未开发票金额
        total_amount: 0,
        // 确认开票金额
        amount: 0,
        // 接收邮箱
        email: ''
      },
      rules: {
        company_name: [
          { required: true, message: '请输入开票公司', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入确认开票金额', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入合法邮箱', trigger: 'blur', type: 'email' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    if(!this.userInfo.id) {
      uni.showModal({
        title: '提示',
        content: '请先登录',
        showCancel: true,
        success: () => {
          uni.navigateTo({
            url: '/pages/user/login'
          })
        }
      })
    }
    this.$api.invoiceAmount({
      user_id: this.userInfo.id
    }).then(res => {
      this.form.total_amount = res
    })
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证通过');
          if (this.form.amount > this.form.total_amount) {
            uni.showToast({
              title: '开票金额不能大于未开发票金额',
              icon: 'none'
            });
            return;
          }
          this.$api.invoiceCreate({
            ...this.form,
            user_id: this.userInfo.id
          }).then(res => {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          });
        } else {
          console.log('验证失败');
        }
      });
    }
  }
}
</script>

<style lang="scss">
.invoice-container {
  padding: 20rpx;
  height: 100%;
  background-color: #f5f5f5;
  .form-box {
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}
</style>
